<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Chatbot</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
        <style type="text/css">
        .fixed-panel {
            min-height: 400px;
            max-height: 400px;
            background-color: #19313c;
            color: white;
            overflow: auto;
        }
        .media-list {
            overflow: auto;
            clear: both;
            display: table;
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: normal;
            line-break: strict;
        }
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 6px solid transparent;
            border-radius: 25px;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
        }
        .panel-info {
            border-color: #0c2735;
        }
        .panel-info>.panel-heading {
            color: white;
            background-color: #0c2735;
            border-color: #0c2735;
        }
        .panel-footer {
            padding: 10px 15px;
            background-color: #0c2735;
            border-top: 1px solid #0c2735;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px
        }
        body {
            background: rgb(96,143,149); /* Old browsers */
            background: -moz-linear-gradient(-45deg, rgba(96,143,149,1) 0%, rgba(0,133,136,1) 9%, rgba(12,36,73,1) 52%, rgba(26,30,59,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(-45deg, rgba(96,143,149,1) 0%,rgba(0,133,136,1) 9%,rgba(12,36,73,1) 52%,rgba(26,30,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(135deg, rgba(96,143,149,1) 0%,rgba(0,133,136,1) 9%,rgba(12,36,73,1) 52%,rgba(26,30,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608f95', endColorstr='#1a1e3b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }
        </style>
    </head>
    <body>
        <div class="container background-color: rgb(255,0,255);">
            <div class="row">
                <h3 class="text-center"><small><strong>Artificial</strong></small><font color="white"> Intelligence!!! </font><small><strong>Here</strong></small><font color="white"> I am..</font></h3>
                ​
                <div class="col-md-4 col-md-offset-4">
                    <div id="chatPanel" class="panel panel-info">
                        <div class="panel-heading">
                            <strong><span class="glyphicon glyphicon-globe"></span> Talk with Me !!! (You: Green / Bot: White) </strong>
                        </div>
                        <div class="panel-body fixed-panel">
                            <ul class="media-list">
                            </ul>
                        </div>
                        <div class="panel-footer">
                            <form method="post" id="chatbot-form">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Enter Message" name="messageText" id="messageText" autofocus/>
                                    <span class="input-group-btn">
                                        <button class="btn btn-info" type="button" id="chatbot-form-btn">Send</button>
                                        <button class="btn btn-info" type="button" id="chatbot-form-btn-clear">Clear</button>
                                        <button class="btn btn-info" type="button" id="chatbot-form-btn-voice">Voice</button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script>
            var exports = {};
        </script>
        <script src="https://unpkg.com/speech-to-text@0.7.4/lib/index.js"></script>
        <script>
        $(function() {
            var synth = window.speechSynthesis;

            var msg = new SpeechSynthesisUtterance();
            var voices = synth.getVoices();
            msg.voice = voices[0];
            msg.rate = 1;
            msg.pitch = 1;

            $('#chatbot-form-btn').click(function(e) {
                e.preventDefault();
                $('#chatbot-form').submit();
            });
            $('#chatbot-form-btn-clear').click(function(e) {
                e.preventDefault();
                $('#chatPanel').find('.media-list').html('');
            });
            $('#chatbot-form-btn-voice').click(function(e) {
                e.preventDefault();

                var onAnythingSaid = function (text) {
                    console.log('Interim text: ', text);
                };
                var onFinalised = function (text) {
                    console.log('Finalised text: ', text);
                    $('#messageText').val(text);
                };
                var onFinishedListening = function () {
                    // $('#chatbot-form-btn').click();
                };

                try {
                    var listener = new SpeechToText(onAnythingSaid, onFinalised, onFinishedListening);
                    listener.startListening();

                    setTimeout(function () {
                        listener.stopListening();
                        if ($('#messageText').val()) {
                            $('#chatbot-form-btn').click();
                        }
                    }, 5000);
                } catch (error) {
                    console.log(error);
                }
            });

            $('#chatbot-form').submit(function(e) {
                e.preventDefault();
                var message = $('#messageText').val();
                $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div style = "text-align:right; color : #2EFE2E" class="media-body">' + message + '<hr/></div></div></div></li>');

                $.ajax({
                    type: "POST",
                    url: "/ask",
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#messageText').val('');
                        var answer = response.answer;
                        const chatPanel = document.getElementById("chatPanel");
                        $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div style = "color : white" class="media-body">' + answer + '<hr/></div></div></div></li>');
                        $(".fixed-panel").stop().animate({ scrollTop: $(".fixed-panel")[0].scrollHeight}, 1000);
                        
                        msg.text = answer;
                        speechSynthesis.speak(msg);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });
        });
        </script>
    </body>
</html>
